<template>
  <div ref="rtmp_comtainer" :id="id" class="rtmp_comtainer"></div>
</template>
<script>
// import resizeBox from '@/components/resizeBox.vue'
import Chimee from 'chimee'
import hls from 'chimee-kernel-hls'
import flv from 'chimee-kernel-flv'
// import chimeePluginControlbar from 'chimee-plugin-controlbar'
// Chimee.install(chimeePluginControlbar) // 安装插件
export default {
  // components: { resizeBox },
  name: 'rtmp',
  data () {
    return {
      videoSize: '',
      plyer: {}
    }
  },
  props: {
    id: {
      type: String,
      default: 'id_test_video'
    },
    src: {
      type: String,
      default: ''
    },
    isResize: {
      type: Boolean,
      default: false
    },
    poster: {
      type: String,
      default: require('@/assets/img/video.png')
    },
    autoplay: {
      type: Boolean,
      default: false
    },
    isLive: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    src (newVal) {
      if (this.chimee) {
        this.chimee.load(newVal)
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      // if (false) {
      if (this.src && this.isLive) {
        this.chimee = new Chimee({
          wrapper: `#${this.id}`,
          src: this.src, // 'http://192.168.9.253/tmp/hls/2021-05-27/e9b6569e-f2f0-43c3-a626-56ecc4bfae8c/video.m3u8', // 'http://28lb009592.wicp.vip:7777/hls/channel1101.m3u8',
          controls: true,
          autoplay: true,
          isLive: true, // 不加isLive 放flv流会报跨域
          kernels: {
            hls,
            flv
          }
        })
      } else {
        this.chimee = new Chimee({
          wrapper: `#${this.id}`,
          src: this.src, // 'http://28lb009592.wicp.vip:7777/hls/channel1101.m3u8',
          controls: true,
          autoplay: true
          // plugins: [{
          //   name: chimeePluginControlbar.name,//控制栏皮肤插件
          //   children: {
          //     play: {},//播放按钮，不配置即使用默认
          //     progressTime: {},//时间，不配置即使用默认
          //     progressBar: {},//进度条，不配置即使用默认
          //     volume: {}, //声音，不配置即使用默认（默认水平方向，设置为vertical变成垂直方向，不过垂直方向有点bug）
          //     playbackrate: {//倍速播放
          //       list: [
          //         { name: '1.0', value: 1, default: true },
          //         { name: '2.0', value: 2 },
          //         { name: '4.0', value: 4 },
          //         { name: '8.0', value: 8 },
          //         { name: '16.0', value: 16 }
          //       ]
          //     },
          //     screen: {} // 全屏
          //   }
          // }]
        })
      }
    })
    // this.plyer.pause()
  },
  beforeDestroy () {
    if (this.chimee) {
      this.chimee.stopLoad()
    }
  },
  methods: {
  }

}
</script>
<style lang="scss" scoped>
  .rtmp_comtainer {
    height: 100%;
    width:100%;
    position: relative;
    overflow: hidden;
    /deep/ video {
      display: block;
    }
  }
  // .vcp-controls-panel {
  //   width: 48px;
  //   height: 48px;
  //   border-radius: 50%;
  //   overflow: hidden;
  //   position: absolute;
  //   top: 50%;
  //   left: 50%;
  //   transform: translateX(-50%) translateY(-50%);
  // }
  // .vcp-fullscreen-toggle {
  //   display: none;
  // }
  // .vcp-volume-icon {
  //   display: none;
  // }
  // .vcp-volume {
  //   display: none;
  // }
  // .vcp-timelabel {
  //   display: none;
  // }
</style>
